<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG Exporter</title>
  <script src="../../libs/raphael-min.2.0.1.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

  <script src="../../libs/raphael-min.2.0.1.js"></script>
  <script src="../../libs/raphael.export.js"></script>
  <script src="../../libs/kekule/kekule.js?modules=chemWidget,algorithm&locals=en,zh"></script>
  <link rel="stylesheet" type="text/css" href="../../libs/kekule/themes/default/kekule.css" />

  <!--
  <script src="../../../src/kekule.js?modules=chemWidget,algorithm&min=false"></script>
  <link rel="stylesheet" type="text/css" href="../../../src/widgets/themes/default/kekule.css" />
  -->

  <script id="chemDoc1" type="chemical/x-kekule-json">
		{"defAutoScaleRefLength":0.8,"root":{"id":"o1","children":{"id":"o2","items":[{"__type__":"Kekule.Molecule","id":"m1","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.502349097842262,"y":38.33168247767857,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a6","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a5","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.9861536563608841,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a4","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-1.3599999999999994,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a3","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.293333333333333,"y":-2.9599999999999937,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-1.759999999999998,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.39948698969421814,"y":-2.5600000000000023,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b6","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b5","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b4","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[1,3]},{"__type__":"Kekule.Bond","id":"b3","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[2,4]},{"__type__":"Kekule.Bond","id":"b2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[3,5]},{"__type__":"Kekule.Bond","id":"b1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[4,5]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Glyph.StraightLine","id":"p1","overrideRenderOptionItems":[null],"coord2D":{"x":4.529015764508928,"y":38.346920572916666,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.219047619047619,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":0,"y":0,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n2","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":4.754285714285716,"y":-2.1447619047619,"__type__":"object"},"coord3D":{"x":1.2000000000000002,"y":0,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"endArrowType":"open","endArrowWidth":0.2,"endArrowLength":0.2,"lineLength":1.5,"__type__":"object"},"connectedNodes":[0,1]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m2","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a7","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a8","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.743740849441242,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a9","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":7.129381495496341,"y":36.60215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"Cl"},{"__type__":"Kekule.Atom","id":"a10","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":6.436561172468792,"y":35.40215866815476,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a11","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":5.05092052641369,"y":36.202158668154766,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b7","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b8","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b9","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[0,3]},{"__type__":"Kekule.Bond","id":"b10","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[1,4]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t1","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"text":"+","coord2D":{"x":4.212825288318453,"y":36.35453962053571,"__type__":"object"},"size2D":{"x":0.21333333333333293,"y":0.37333333333333485,"__type__":"object"}},{"__type__":"Kekule.Molecule","id":"m3","renderOptions":{"expanded":true,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null,null],"coord2D":{"x":8.433777669270833,"y":36.53739676339286,"__type__":"object"},"charge":0,"parity":null,"formula":{"sections":[{"__type__":"object","obj":{"__type__":"Kekule.Atom","charge":0,"parity":null,"isotopeId":"Al"},"count":1},{"__type__":"object","obj":{"__type__":"Kekule.Atom","charge":0,"parity":null,"isotopeId":"Cl"},"count":3}],"charge":0,"radical":0,"__type__":"Kekule.MolecularFormula"}},{"__type__":"Kekule.Glyph.HeatSymbol","id":"p2","renderOptions":{"strokeWidth":1.5,"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":8.1404443359375,"y":38.11834914434524,"__type__":"object"},"ctab":{"nodes":[{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n3","interactMode":-1,"overrideRenderOptionItems":[null],"coord2D":{"x":0.3390476190476175,"y":-2.0057142857142836,"__type__":"object"},"coord3D":{"x":0,"y":0.2,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n4","interactMode":-1,"overrideRenderOptionItems":[null,null],"coord2D":{"x":0.512252699804506,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":0.17320508075688776,"y":-0.09999999999999996,"z":0,"__type__":"object"},"nodeType":"location"},{"__type__":"Kekule.Glyph.PathGlyphNode","id":"n5","interactMode":-1,"overrideRenderOptionItems":[null],"coord2D":{"x":0.16584253829073248,"y":-2.305714285714288,"__type__":"object"},"coord3D":{"x":-0.17320508075688767,"y":-0.10000000000000009,"z":0,"__type__":"object"},"nodeType":"location"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c2","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[0,1]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c3","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[1,2]},{"__type__":"Kekule.Glyph.PathGlyphConnector","id":"c4","interactMode":-1,"overrideRenderOptionItems":[null],"pathType":"L","pathParams":{"lineLength":1,"edgeCount":3,"nodeProps":{"__type__":"object","interactMode":-1},"connectorProps":{"__type__":"object","interactMode":-1},"__type__":"object"},"connectedNodes":[2,0]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.Molecule","id":"m4","renderOptions":{"expanded":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":9.865777994791667,"y":38.89377766927083,"__type__":"object"},"charge":0,"parity":null,"ctab":{"nodes":[{"__type__":"Kekule.Atom","id":"a14","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a18","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551055,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a13","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":1.332820323027553,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a15","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a19","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.7184609690826544,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a21","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":2.0256406460551073,"y":-1.066666666666677,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"O"},{"__type__":"Kekule.Atom","id":"a12","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":0.6400000000000023,"y":-3.4666666666666686,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a16","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-2.266666666666673,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a20","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":3.4112812921102034,"y":-1.8666666666666742,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"},{"__type__":"Kekule.Atom","id":"a17","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"coord2D":{"x":-0.052820323027548355,"y":-3.066666666666663,"__type__":"object"},"charge":0,"parity":null,"isotopeId":"C"}],"anchorNodes":[],"connectors":[{"__type__":"Kekule.Bond","id":"b17","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[0,1]},{"__type__":"Kekule.Bond","id":"b12","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,2]},{"__type__":"Kekule.Bond","id":"b13","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[0,3]},{"__type__":"Kekule.Bond","id":"b18","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[1,4]},{"__type__":"Kekule.Bond","id":"b20","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"bondType":"covalent","bondOrder":2,"electronCount":4,"isInAromaticRing":false,"connectedNodes":[1,5]},{"__type__":"Kekule.Bond","id":"b11","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[2,6]},{"__type__":"Kekule.Bond","id":"b14","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[3,7]},{"__type__":"Kekule.Bond","id":"b19","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":2,"isInAromaticRing":false,"connectedNodes":[4,8]},{"__type__":"Kekule.Bond","id":"b16","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":2,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[6,9]},{"__type__":"Kekule.Bond","id":"b15","renderOptions":{"useAtomSpecifiedColor":true,"__type__":"object"},"overrideRenderOptionItems":[null],"parity":null,"bondType":"covalent","bondOrder":1,"electronCount":3,"isInAromaticRing":true,"connectedNodes":[7,9]}],"__type__":"Kekule.StructureConnectionTable"}},{"__type__":"Kekule.TextBlock","id":"t2","renderOptions":{"fontFamily":"Georgia, Times New Roman, Times, serif","fontSize":20,"useAtomSpecifiedColor":false,"color":"#000066","__type__":"object"},"overrideRenderOptionItems":[null,null],"text":"Friedel-Crafts Reaction","coord2D":{"x":4.825777994791667,"y":34.6804443359375,"__type__":"object"},"size2D":{"x":5.501333414713541,"y":0.5333333333333385,"__type__":"object"}}],"__type__":"Kekule.ChemObjList"},"__type__":"Kekule.ChemSpaceElement"},"enableAutoId":true,"screenSize":{"x":900,"y":1500,"__type__":"object"},"size2D":{"x":24,"y":40,"__type__":"object"},"__type__":"Kekule.ChemDocument"}
	</Script>

  <script>
    // A 2D viewer force to use raphael renderer bridge
	  Kekule.ChemWidget.Viewer2DSvg = Class.create(Kekule.ChemWidget.Viewer2D,
    {
      /** @private */
      CLASS_NAME: 'Kekule.ChemWidget.Viewer2DSvg',
	    /** @ignore */
	    createDrawBridge: function($super, slient)
      {
		    if (Kekule.Render.RaphaelRendererBridge)
        	return new Kekule.Render.RaphaelRendererBridge();
        else
        	return $super(slient);
	    }
    });

		var chemComposer, chemViewer;

    function exportToSvg()
    {
	    var chemObj = chemComposer.getSavingTargetObj();
	    if (chemObj)
	    {
		    chemViewer.setChemObj(chemObj);

		    var context = chemViewer.getDrawContext();
		    if (context && context.toSVG)
        {
	        var svg = context.toSVG();
	        console.log('SVG: ', svg);
	        alert(svg);
        }
	    }
    }

		function init()
		{
			chemComposer = Kekule.Widget.getWidgetById('chemComposer');
			chemComposer
				.setEnableDimensionTransform(true)
				.setAutoSetMinDimension(true)
				.setAutoResizeConstraints({width: 1, height: 1})
				.autoResizeToClient();  // force a resize to window client

      // add custom "export to svg" button to composer
			var toolButtons = chemComposer.getDefaultCommonToolBarButtons();
			toolButtons.push({'text': 'Export to SVG', 'showText': true, '#execute': exportToSvg});
			chemComposer.setCommonToolButtons(toolButtons);

      chemViewer = Kekule.Widget.getWidgetById('chemViewer');
      chemViewer.setAutoSize(true);
		}
		Kekule.X.domReady(init);
  </script>
  <style>
    html, body
    {
      margin: 0;
      padding: 0;
      overflow: hidden;
      touch-action: none;
    }
    #hiddenPanel
    {
      width: 0px;
      height: 0px;
      position: absolute;
      visibility: hidden;
    }
    #chemComposer
    {
      margin: 0;
    }
    #chemViewer
    {
      /*
      width: 300px;
      heght: 200px;
      */
    }
  </style>
</head>
<body>
<div id="hiddenPanel">
  <div id="chemViewer" data-widget="Kekule.ChemWidget.Viewer2DSvg"></div>
</div>
<div id="chemComposer" style="width:800px;height:600px" data-widget="Kekule.Editor.Composer" data-chem-obj="url(#chemDoc1)"></div>
</body>
</html>